<!-- 组合空调 -->
<template>
  <div class="kongtiao">
    <img class="bg" :src="src" alt="bg" />
    <img
      class="sy"
      :class="active ? 'active' : ''"
      src="/public/devices/kongtiao/fan_1.png"
      alt="fan_1"
    />
    <div class="cover" v-if="!active"></div>
  </div>
</template>
<script setup name="kongtiao">
import { computed } from "vue";
import air_green from "/public/devices/kongtiao/air_green.png";
import air_grey from "/public/devices/kongtiao/air_grey.png";
import { userStore } from "@/store/modules/userStore";
const store = userStore();

const props = defineProps({
  data: {
    type: Object,
    required: false,
    default: () => ({}),
  },
});

let open = true;
const active = computed(() => {
  const modules = store.getOperateList.filter(
    (v) => v.currentComName === store.getCurrentComName
  );
  if (modules.length) {
    let exist = modules.find((v) => v.index === props.data.index);
    open = !exist;
  }
  return open;
});

const src = computed(() => {
  return active.value ? air_green : air_grey;
});
</script>
<style scoped lang="less">
@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.kongtiao {
  cursor: pointer;
  position: relative;
  .bg {
    width: 100%;
    height: 100%;
  }
  .sy {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 28%;
    top: 17%;
  }

  .active {
    animation: rotate 4s linear infinite;
    transform-origin: center center;
  }

  .cover {
    width: 30px;
    height: 24px;
    background-color: #073650;
    position: absolute;
    left: -30px;
    top: 0;
    pointer-events: none;
  }
}
</style>
